<template>
	<div class="pay">
		<div class="shopcart_header">
			<p>订单</p>
		</div>
		<!--<div class="pay-header">
			<ul >
				<li>
					1
				</li>
				<li>
					<div class="store">
						<p>收货人: <span>rer</span></p>
						<p>13855667878</p>
					</div>
					<div class="address">
						<p>收货地址:<span>北京朝阳区建国门外大街国贸一座</span></p>
					</div>
				</li>
				<li>
					1
				</li>
			</ul>
		</div>-->
		<div class="orderaddress" @click="dizhi" v-show="showaddress" v-if="this.id == ''" >
			<div class="addresshead">
				<span>收货人：{{data.usersAddrVo.receiverName}}</span>
				<span style="float: right;">{{data.usersAddrVo.receiverPhone}}</span>
			</div>
			<div class="addressdetail">收货地址：{{data.usersAddrVo.detail}}</div>
		</div>
		
		<div class="orderaddress" v-show="showaddress" v-if="this.id != ''" @click="dizhi">
			<div class="addresshead">
				<span>收货人：{{receiverName}}</span>
				<span style="float: right;">{{receiverPhone}}</span>
			</div>
			<div class="addressdetail">收货地址：{{detail}}</div>
		</div>
		
		<div class="orderaddress" v-show="noaddress">
			<h1 @click="address()" class="noaddressh1"> <img src="../assets/jia.png" alt="" class="noaddressimg" />没有添加地址</h1>
		</div>
		<div class="coding">
			<div class="encoding" style="display: none;">
				<p>订单编码:564654654645 <span>复制</span></p>
				<hr />
			</div>
			<div class="shopping" v-for="item in data.goodsList">
				<img :src="item.goodsImg" alt="" />
				<div class="short">
					<span class="sn">{{item.goodsName}}</span>
					<!--<p >{{item.param}}</p>-->
					<p style="padding-top: 0.2rem;margin: 0;"><span v-for="items in item.param" style="margin: 0 0.1rem;">{{items}}</span></p>
					
					 
				</div>
				<div class="money" v-if="item.isRevice == 0">
					<p style="padding-top: 0.5rem;">￥{{item.orginPrice}}</p>
					<p class="span" style="display: none;"><s>￥{{item.orginPrice}}</s></p>
					<!--<a>红包劵: ￥ 20.00</a>-->
				</div>
				<div class="money" v-if="item.isRevice == 1">
					<p>￥{{item.price}}</p>
					<p class="span"><s>￥{{item.orginPrice}}</s></p>
					<!--<a>红包劵: ￥ 20.00</a>-->
				</div>
			</div>
		</div>
		<div class="main">
			<div class="count">
				<h2 style="float: left;">购买数量</h2>
				<div class="countmain">
					<div class="value-box">
						<span class="minus" @click="subtractbut()"><a></a></span>
						<span class="buyval"><input type="text" class="buy-num"  ref="buynum" v-model="buyNum"></span>
						<span class="add" @click="addstock(stocklist)"></span>
					</div>
				</div>
			</div>
			<div class="pay-footer">
				<div class="hr"></div>
				<textarea placeholder="填写: 给商家留言"></textarea>
				<div class="discount" v-if="data.isUseSysCoupon == 0" style="display: none;">
					<p>优惠券</p>
					<p>请选择</p>
				</div>
				<div class="discount" v-if="data.isUseSysCoupon == 1" @click="vocherbut">
					<p>优惠券</p>
					<p>{{vochername}}</p>
				</div>
				<div class="hr"></div>
				<div class="discount">
					<p>配送方式</p>
					<p>包邮</p>
				</div>
				<div class="hr"></div>
				<div class="hr"></div>
				<!--<div class="discount" v-if="data.isUsePoint == 0" style="display: none;">
					<p>可用{{data.pointsAmount}}U币抵用{{data.points}}元</p>
				</div>
				<div class="discount" v-if="data.isUsePoint == 1">
					<p>可用{{data.pointsAmount}}U币抵用{{data.points}}元</p>
				</div>-->
			</div>
		</div>
		<div class="pay-footer2">
			<div class="sum" v-model="payprice">实付款: ￥{{payprice}}</div>
			<div v-on:click="buyEvent()" style="background:#ff2040;color:white;text-align:center;line-height:0.95rem;width:30%">立即支付</div>

		</div>
		<div id="footer-show" v-show="isShow">
			<div></div>
			<div class="payment">
				<ul>
					<!--<li>余额支付 (￥4343)</li>-->
					<li>
						<i class="wxpic"></i>微信支付
						<i class="hookpic"></i>
					</li>
					<li><input type="button" value="确定" v-on:click="payment()" /></li>
				</ul>
			</div>
		</div>
		<div class="maskcon" v-show="maskcon">
			<div class="maskbut" @click="hidemaskbut">完成</div>
			<div class="maskcoupn">
				<h4>优惠券</h4>
				<div class="samemask" v-for="(item,index) in data.couponList">
					<div class="sameredpackge">
						<span class="redpacketfont"><i class="priceSymbol">¥</i>{{item.amount}}</span>
						<p class="sameprice">满{{item.useCond}}可用</p>
						<p class="sameprice">使用期限：{{item.startTime}}-{{item.endTime}}</p>
					</div>
					<div class="samepacket" @click="receivebut(item.id,item.amount)" v-model="redpackname">{{redpackname}}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { gzhUrl } from '../Baseurl/common.js';
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				isShow: false,
				token: '',
				data: [],
				redpackname: '立即领取',
				maskcon: false,
				redname: '',
				redpackedid: '',
				vochername: '请选择',
				stocklist: '',
				skuId: '',
				payprice: '',
				addressid: '',
				orderNo: '',
				buyNum: '0',
				noaddress: false,
				showaddress: false,
				yunId: '',
				skuIdCounts:'',
				id:'',
				receiverName:'',
				receiverPhone:'',
				detail:'',
				list:[]
			}
		},
		created() {
			
			this.receiverName = localStorage.getItem('receiverName');
			this.receiverPhone = localStorage.getItem('receiverPhone');
			this.detail = localStorage.getItem('city');
			var href = window.location.href;
			var procountt = href.split('?');
//			var proid = procountt[1].replace('-', ':');
			this.skuIdCounts = this.$route.query.skuIdCounts;
			var proid = this.skuIdCounts.replace('-', ':');
			this.id = this.$route.query.id;
//			alert(proid)
			this.token = localStorage.getItem('token');
//			alert(this.token)
			var url = BaseUrl + 'userspay/paydetail?token=' + this.token + '&appId=gzh&' + '&skuIdCounts=' + proid;
//			console.log(url)
			this.$http.get(url).then(res => {
				if(res.data.code == "10000") {
					this.data = res.data.data;
//					console.log(this.data)
					this.list=res.data.data.goodsList[0].param
//					console.log(this.list)
					this.addressid = this.data.usersAddrVo.id;
//					console.log(this.addressid)
					var goodJson = this.data.goodsList;
					for(var i = 0; i < goodJson.length; i++) {
						this.buyNum = goodJson[i].count
					}
					if(res.data.data.usersAddrVo.receiverName == "") {
						this.noaddress = true;
						this.showaddress = false
					} else {
						this.noaddress = false;
						this.showaddress = true
					}
					
					
					
				} else if(res.data.code == "10001"){
					window.location.href = gzhUrl + 'Uc/author?backUrl=' + href;
				}else{
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					});
				}
			})
			
			
			if(localStorage.getItem('receiverName') == '' || localStorage.getItem('receiverName') == null){

			}else{
				
			}

//			this.skuId = proid.split('=')[1].split(':')[0];
			this.skuId = proid.split(':')[0]
//			alert(this.skuId)
			//库存请求数据
			var stockurl = BaseUrl + 'goods/sku/count?skuId=' + this.skuId;
			this.$http.get(stockurl).then(res => {

				if(res.data.code == "10000") {
					this.stocklist = res.data.data;
				} else {
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					});
				}
			})
			//console.log(BaseUrl+'orders/calActualMoney?token='+ this.token +'&appId=gzh&'+proid+'&isUserPoint=0');
			//实付款
			var payurl = BaseUrl + 'orders/calActualMoney?token=' + this.token + '&appId=gzh&' + '&skuIdCounts=' + proid + '&isUserPoint=0'
			this.$http.get(payurl).then(res => {
				//console.log(res.data);
				this.payprice = res.data.data.actualPay.toFixed(2);
//replace
			})
		},
		computed: {

		},
		components: {

		},
		methods: {
			buyEvent: function() {
//				if(this.addressid.length == 0) {
//					Toast({
//						message: "请填写地址信息",
//						position: 'middle',
//						duration: 3000
//					});
//				} else {
//					//this.isShow = true;
//					this.yunId = localStorage.getItem('yunId');
//					var nourl = this.token + '&appId=gzh&skuIdCounts=' + this.skuId + ':' + this.buyNum + '&couponId=' + this.redpackedid + '&isUsePoints=0&id=' + this.addressid + '&actualMoney=' + this.payprice
//					var url = BaseUrl + 'userspay/submitOrder?token=' + nourl + '&yunId=' + this.yunId;
//					//console.log(localStorage.getItem('yunId'));
//					this.$http.get(url).then(res => {
//						console.log(res.data);
//						if(res.data.code == "10000") {
//							this.orderNo = res.data.data;
//							window.location.href = gzhUrl + "Order/gpay2?id=" + this.orderNo
//						}
//
//					})	
//				}
				
				
				
				if(this.id == undefined){
					if(this.addressid.length == 0) {
						Toast({
							message: "请填写地址信息",
							position: 'middle',
							duration: 3000
						});
					} else {
						//this.isShow = true;
						this.yunId = localStorage.getItem('yunId');
						var nourl = this.token + '&appId=gzh&skuIdCounts=' + this.skuId + ':' + this.buyNum + '&couponId=' + this.redpackedid + '&isUsePoints=0&id=' + this.addressid + '&actualMoney=' + this.payprice
						var url = BaseUrl + 'userspay/submitOrder?token=' + nourl + '&yunId=' + this.yunId;
						//console.log(localStorage.getItem('yunId'));
//						console.log(url)
						this.$http.get(url).then(res => {
//							console.log(res.data);
							if(res.data.code == "10000") {
								this.orderNo = res.data.data;
								window.location.href = gzhUrl + "Order/gpay2?id=" + this.orderNo
							}
	
						})	
					}
				}else{
					if(this.id.length == 0) {
						Toast({
							message: "请填写地址信息",
							position: 'middle',
							duration: 3000
						});
					} else {
						//this.isShow = true;
						this.yunId = localStorage.getItem('yunId');
						var nourl = this.token + '&appId=gzh&skuIdCounts=' + this.skuId + ':' + this.buyNum + '&couponId=' + this.redpackedid + '&isUsePoints=0&id=' + this.id + '&actualMoney=' + this.payprice
						var url = BaseUrl + 'userspay/submitOrder?token=' + nourl + '&yunId=' + this.yunId;
						//console.log(localStorage.getItem('yunId'));
//						console.log(url)
						this.$http.get(url).then(res => {
//							console.log(res.data);
							if(res.data.code == "10000") {
								this.orderNo = res.data.data;
								window.location.href = gzhUrl + "Order/gpay2?id=" + this.orderNo
							}
	
						})	
					}	
				}
				
				
			},
			payment: function() {
				/*MessageBox.alert('操作成功').then(action => {
					this.$router.push({
						path: '/drop_shipping'
					})
				});*/

				this.$router.push({
					path: gzhUrl + 'Order/gpay2?id=' + this.orderNo
				})

			},
			receivebut: function(obj, index) {

				this.vochername = '-￥' + index;
				this.redname = index;
				this.redpackedid = obj;
				this.redpackname = "已领取";

			},
			vocherbut: function() {
				this.maskcon = true;
			},
			hidemaskbut: function() {
				this.maskcon = false;
				//实付款
				if(this.redpackedid == "") {
					this.redpackedid = 0
				}
				var payurl = BaseUrl + 'orders/calActualMoney?token=' + this.token + '&appId=gzh&skuIdCounts=' + this.skuId + ':' + this.buyNum + '&isUserPoint=0&couponId=' + this.redpackedid
				this.$http.get(payurl).then(res => {
//					console.log(res.data);
					this.payprice = res.data.data.actualPay.toFixed(2);

				})
			},
			addstock: function(obj) {

				var val = this.$refs.buynum.value;
				if(parseInt(val) < obj) {
					this.buyNum = parseInt(val) + 1;
				}

				//console.log(parseInt(val)*1,this.data.skuIds);
				//实付款
				var payurl = BaseUrl + 'orders/calActualMoney?token=' + this.token + '&appId=gzh&skuIdCounts=' + this.data.skuIds + ':' + this.buyNum + '&isUserPoint=0&couponId=' + this.redpackedid
				this.$http.get(payurl).then(res => {

					this.payprice = res.data.data.actualPay.toFixed(2);

				})
//				this.payprice = parseInt(this.buyNum) * 1
			},
			subtractbut: function() {
				var val = this.$refs.buynum.value;
				if(parseInt(val) > 1) {
					this.buyNum = parseInt(val) - 1;
				}
				//实付款
				var payurl = BaseUrl + 'orders/calActualMoney?token=' + this.token + '&appId=gzh&skuIdCounts=' + this.data.skuIds + ':' + this.buyNum + '&isUserPoint=0&couponId=' + this.redpackedid
				this.$http.get(payurl).then(res => {

					this.payprice = res.data.data.actualPay.toFixed(2);

				})
//				this.payprice = parseInt(this.buyNum) * 1
			},
			address: function() {
				this.$router.push({
					path: '/newaddress'
				})
			},
			dizhi:function(){
				this.$router.push({
					path: '/receaddress'
				})
				localStorage.setItem('skuIdCounts', this.skuIdCounts);
			}
		}

	}
</script>

<style scoped="scoped">
	/****订单*****/
	.float_right{
		float:right
	}
	.orderaddress {
		padding: 0.25rem;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	
	.addressdetail {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.noaddressimg {
		width: 0.28rem;
		height: 0.28rem;
		margin-right: 0.2rem;
	}
	
	.noaddressh1 {
		font-size: 0.28rem;
	}
	/****蒙版*****/
	
	.maskcon {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.7);
		top: 0rem;
	}
	
	.maskbut {
		width: 100%;
		height: 0.9rem;
		background-color: #FF2040;
		bottom: 0;
		position: fixed;
		line-height: 0.9rem;
		color: #ffff;
		text-align: center;
		font-size: 0.3rem;
	}
	
	.maskcoupn {
		position: fixed;
		width: 100%;
		bottom: 0.9rem;
		background-color: #FFFFFF;
		padding: 0.36rem;
		padding-bottom: 0.4rem;
	}
	
	.maskcoupn>h4 {
		text-align: center;
	}
	
	.samemask {
		width: 100%;
		height: 1.8rem;
		margin-top: 0.3rem;
		border: solid 0.01rem #FF2040;
		border-radius: 0.1rem;
		font-size: 0;
	}
	
	.sameredpackge {
		width: 70.8%;
		height: 100%;
		display: inline-block;
		padding-left: 0.2rem;
	}
	
	.samepacket {
		width: 29.2%;
		height: 100%;
		background: url(../assets/draw.png);
		background-size: 100% 100%;
		display: inline-block;
		float: right;
		line-height: 1.8rem;
		text-align: center;
		color: #fff;
		font-size: 0.28rem;
	}
	
	.redpacketfont {
		font-size: 0.6rem;
		color: #FF2040;
		display: inline-flex;
	}
	
	.priceSymbol {
		color: #FF2040;
		font-style: normal;
		font-size: 0.24rem;
		display: inline-table;
		margin-top: 0.3rem;
	}
	
	.sameprice {
		font-size: 0.22rem;
		color: #888888;
	}
	/****数量****/
	
	.countmain {
		width: 44%;
		height: 1rem;
		float: right;
	}
	
	.value-box {
		display: inline-block;
		float: right;
		font-size: 0;
		margin-top: 0.2rem;
		margin-right: 0.2rem;
	}
	
	.minus {
		width: 0.66rem;
		height: 0.6rem;
		background: url(../assets/value_minus.png);
		background-size: 100%;
		display: inline-block;
	}
	
	.add {
		width: 0.66rem;
		height: 0.6rem;
		background: url(../assets/value_add.png);
		background-size: 100%;
		display: inline-block;
	}
	
	.buy-num {
		width: 0.6rem;
		height: 0.6rem;
		padding: 0;
		font-size: 0.6rem;
		font-weight: lighter;
		line-height: 0.6rem;
		text-align: center;
		border: solid #eee;
		border-width: 0 0.05rem;
		border-radius: 0;
		background: #eeeeee;
		margin: 0 0.02rem;
		font-size: 0.36rem;
	}
	
	.buyval {
		display: inline-block;
		vertical-align: top;
		line-height: 0;
	}
	
	body {
		height: auto;
	}
	
	#footer-show {
		position: fixed;
		bottom: 0;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		background: rgba(0, 0, 0, 0.65);
	}
	
	.payment {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
	}
	
	.payment input {
		border: 0px solid #FF1D51;
		background: #FF1D51;
		color: white;
		width: 100%;
	}
	
	ul li {
		/*display: flex;
		flex-direction: column;*/
		background: white;
		width: 100%;
		margin: 0;
		line-height: 1.13rem;
		height: 1rem;
		display: flex;
	}
	
	.pay-footer {
		width: 100%;
		background: white;
	}
	
	.hr {
		width: 95%;
		height: 0.01rem;
		background: #989898;
		transform: translateX(3%);
	}
	
	textarea {
		width: 95%;
		transform: translateX(3%);
		margin-top: 0.17rem;
		height: 1.65rem;
		letter-spacing: 0.03rem;
		border: 2px solid #E2E2E2;
		outline: none;
	}
	
	.pay {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		margin: 0;
		padding: 0;
	}
	
	.sum {
		line-height: 0.95rem;
		margin-right: 0.23rem;
	}
	
	.pay-footer2 {
		display: flex;
		background-color: white;
		height: 0.95rem;
		justify-content: flex-end;
		margin-top: 0.36rem;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
	
	.discount {
		display: flex;
		justify-content: space-between;
		font-size: 0.3rem;
		height: 0.95rem;
		line-height: 0.7rem;
	}
	
	.discount>p:first-child {
		margin-left: 0.25rem;
		margin-top: 0.15rem;
	}
	
	.discount>p:nth-child(2) {
		margin-right: 0.25rem;
		margin-top: 0.15rem;
	}
	
	ul li {
		list-style: none;
	}
	
	.shopcart_header {
		width: 100%;
		height: 1rem;
		border-bottom: 1px solid gainsboro;
		display: flex;
		justify-content: center;
		background: white;
	}
	
	.shopcart_header p {
		text-align: center;
		line-height: 1rem;
		font-size: 0.4rem;
		font-weight: bold;
	}
	
	.pay-header ul {
		display: flex;
		justify-content: flex-start;
		padding: 0;
		height: 2.01rem;
		background: white;
	}
	
	.pay-header>ul>li:first-child {
		width: 12%;
		background: white;
	}
	
	.pay-header>ul>li:nth-child(2) {
		width: 75%;
		background: white;
	}
	
	.pay-header>ul>li:nth-child(3) {
		width: 13%;
		background: white;
	}
	
	.store {
		display: flex;
		justify-content: space-between;
		line-height: 1rem;
	}
	
	.address {
		display: flex;
		justify-content: space-between;
		text-overflow: ellipsis;
		overflow: hidden;
		letter-spacing: 0.03rem;
	}
	
	.address>p:nth-child(2) {
		text-overflow: ellipsis;
		overflow: hidden;
		word-wrap: break-word;
	}
	
	.coding {
		width: 100%;
		background: white;
	}
	
	.encoding {
		width: 100%;
		height: 0.78rem;
		background: white;
		margin-top: 0.1rem;
		border-bottom: 1px solid gainsboro;
	}
	
	.encoding p {
		line-height: 0.78rem;
		margin-left: 0.18rem;
		letter-spacing: 0.03rem;
	}
	
	.encoding span {
		color: #FF1D51;
	}
	
	.shopping {
		display: flex;
		justify-content: flex-start;
		height: 2.4rem;
		margin-top: 0.16rem;
		background: #F4F4F4;
	}
	
	.shopping img {
		width: 23%;
		height: 60%;
		margin-left: 0.4rem;
		margin-top: 0.2rem;
	}
	
	.short {
		margin-top: 0.15rem;
		margin-left: 0.23rem;
		font-size: 0.28rem;
		width: 3.2rem;
		letter-spacing: 0.01rem;
		
	}
	.sn{
		height: 0.8rem;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.short p {
		font-size: 0.24rem;
		margin-top: 0.4rem;
		color: #777777;
		font-family: "微软雅黑";
	}
	
	.money {
		margin-left: 0.28rem;
		line-height: 0.8rem;
	}
	
	.span {
		color: #777777;
		margin-top: -0.3rem;
	}
	
	.money a {
		margin-left: -1rem;
		font-size: 0.3rem;
		color: red;
	}
	
	.main {
		background: white;
	}
	
	.count {
		width: 100%;
		height: 1rem;
		margin-top: -0.3rem;
	}
	
	.count h2 {
		margin-left: 0.29rem;
		line-height: 1rem;
		letter-spacing: 0.03rem;
		font-size: 0.3rem;
	}
	
	.wxpic {
		width: 0.4rem;
		height: 0.4rem;
		background: url(../assets/weixin.png);
		background-size: 100%;
		display: block;
		margin: 0.3rem;
	}
	
	.hookpic {
		display: block;
		width: 0.32rem;
		height: 0.24rem;
		background: url(../assets/hookpic.png);
		background-size: 100% 100%;
		float: right;
		margin-left: 60%;
		margin-top: 0.35rem;
	}
</style>